<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 15px; padding-top: 20px; background-color: white;">
      <el-form-item label="机构名称：">
        <el-input v-model="formInline.jigouming" placeholder="机构名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" plain @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="background-color: white;margin-top: 10px;padding: 15px">
      <el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="openadd">新增</el-button>
      <el-button type="success" icon="el-icon-search" plain @click="look">查看</el-button>
      <el-button type="warning" icon="el-icon-edit-outline" plain @click="openedit">修改</el-button>
      <el-button type="danger" icon="el-icon-delete" plain @click="dele">删除</el-button>
    </div>
    <el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" :index="indexAdd"></el-table-column>
      <el-table-column prop="jigouName" label="机构名称" width="110"></el-table-column>
      <el-table-column prop="flag" label="所属分类" width="125">
        <template slot-scope="scope">
          <el-button size="mini" plain>
            {{scope.row.flag=="0"?'日间照料中心':''}}
            {{scope.row.flag=="1"?'居家养老服务':''}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="xingzhengquhua" label="行政区划" width="170"></el-table-column>
      <el-table-column v-for="city in xiangzhixinxi" :prop="city.zbxName" :key="city.noid" :label="city.zbxName">{{city.zhibiao}}</el-table-column>
    </el-table>

    <!-- 分页 ------------------------------------------------>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    
    <!-- 新增 ------------------------------------------------>
    <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" width="66%" :before-close="handleClose" :modal="false">
      <el-form :inline="true" :model="safety" :rules="rules" class="demo-form-inline" style="padding-left: 45px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构名称：" prop="rijianjujiaid">
              <el-select v-model="safety.rijianjujiaid" clearable placeholder="机构名称">
                <el-option v-for="item in jigouname" :key="item.noid" :label="item.jigouName" :value="item.noid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否建立门卫制度: " prop="ismenwei">
              <el-radio-group v-model="safety.ismenwei">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构周边是否存在自然灾害隐患: " prop="isanquanyinhuan">
              <el-select v-model="safety.isanquanyinhuan" placeholder="-请选择-">
                <el-option label="泥石流" value="泥石流"/>
                <el-option label="洪水" value="洪水"/>
                <el-option label="森林火灾" value="森林火灾"/>
                <el-option label="否" value="否"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构周边是否存在环境污染隐患: " prop="ishuanjingwuran">
              <el-radio-group v-model="safety.ishuanjingwuran">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否建立每日食品留样制度: " prop="isliuyang">
              <el-radio-group v-model="safety.isliuyang">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无安排管理部门: " prop="isguanlibumen">
              <el-radio-group v-model="safety.isguanlibumen">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="管理部门负责人姓名: " prop="admname">
              <el-input v-model="safety.admname"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理部门负责人联系方式: " prop="admphone">
              <el-input v-model="safety.admphone"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有无消防管理人员: " prop="isxiaofang">
              <el-radio-group v-model="safety.isxiaofang">
                <el-radio label="有">有</el-radio>
                <el-radio label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消防管理负责人姓名: " prop="firename" v-if="safety.isxiaofang=='有'">
              <el-input v-model="safety.firename"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="消防管理负责人工作性质: " prop="firetype">
              <el-radio-group v-model="safety.firetype">
                <el-radio label="兼职">兼职</el-radio>
                <el-radio label="专职">专职</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否每天开展日间防火巡查: " prop="firedayprotection">
              <el-radio-group v-model="safety.firedayprotection">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否每天开展夜间防火巡查: " prop="firenightprotection">
              <el-radio-group v-model="safety.firenightprotection">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无灭火和应急疏散预案: " prop="fireevacuation">
              <el-radio-group v-model="safety.fireevacuation">
                <el-radio label="有">有</el-radio>
                <el-radio label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有无突发事件应急预案: " prop="emergency">
              <el-radio-group v-model="safety.emergency">
                <el-radio label="有">有</el-radio>
                <el-radio label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无消防安全标识: " prop="isxfbiaoshi">
          <el-radio-group v-model="safety.isxfbiaoshi">
            <el-radio label="有">有</el-radio>
            <el-radio label="无">无</el-radio>
          </el-radio-group>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" style="padding: 10px 20px 37px; margin-right: 60px;">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-show="isAdd" @click="Add">确 定</el-button>
        <el-button type="primary" v-show="!isAdd" @click="edit">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 新增 ------------------------------------------------>

    <!-- 查看 ------------------------------------------------>
    <el-dialog title="查看" :visible.sync="lookbutton" width="66%" :before-close="handleClose" :modal="false">
      <el-form :inline="true" :model="safety" :rules="rules" class="demo-form-inline" style="padding-left: 45px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构名称：" prop="rijianjujiaid">
              <el-select v-model="safety.rijianjujiaid" clearable placeholder="机构名称"  :disabled="true">
                <el-option v-for="item in jigouname" :key="item.noid" :label="item.jigouName" :value="item.noid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否建立门卫制度: " prop="ismenwei">
              <el-radio-group v-model="safety.ismenwei">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构周边是否存在自然灾害隐患: " prop="isanquanyinhuan">
              <el-select v-model="safety.isanquanyinhuan" :disabled="true" placeholder="-请选择-">
                <el-option label="泥石流" value="泥石流"/>
                <el-option label="洪水" value="洪水"/>
                <el-option label="森林火灾" value="森林火灾"/>
                <el-option label="否" value="否"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构周边是否存在环境污染隐患: " prop="ishuanjingwuran">
              <el-radio-group v-model="safety.ishuanjingwuran">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否建立每日食品留样制度: " prop="isliuyang">
              <el-radio-group v-model="safety.isliuyang">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无安排管理部门: " prop="isguanlibumen">
              <el-radio-group v-model="safety.isguanlibumen">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="管理部门负责人姓名: " prop="admname">
              <el-input v-model="safety.admname"  :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理部门负责人联系方式: " prop="admphone">
              <el-input v-model="safety.admphone"  :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有无消防管理人员: " prop="isxiaofang">
              <el-radio-group v-model="safety.isxiaofang">
                <el-radio  :disabled="true" label="有">有</el-radio>
                <el-radio  :disabled="true" label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消防管理负责人姓名: " prop="firename" v-if="safety.isxiaofang=='有'">
              <el-input v-model="safety.firename"  :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="消防管理负责人工作性质: " prop="firetype">
              <el-radio-group v-model="safety.firetype">
                <el-radio  :disabled="true" label="兼职">兼职</el-radio>
                <el-radio  :disabled="true" label="专职">专职</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否每天开展日间防火巡查: " prop="firedayprotection">
              <el-radio-group v-model="safety.firedayprotection">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否每天开展夜间防火巡查: " prop="firenightprotection">
              <el-radio-group v-model="safety.firenightprotection">
                <el-radio  :disabled="true" label="是">是</el-radio>
                <el-radio  :disabled="true" label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无灭火和应急疏散预案: " prop="fireevacuation">
              <el-radio-group v-model="safety.fireevacuation">
                <el-radio  :disabled="true" label="有">有</el-radio>
                <el-radio  :disabled="true" label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有无突发事件应急预案: " prop="emergency">
              <el-radio-group v-model="safety.emergency">
                <el-radio  :disabled="true" label="有">有</el-radio>
                <el-radio  :disabled="true" label="无">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无消防安全标识: " prop="isxfbiaoshi">
          <el-radio-group v-model="safety.isxfbiaoshi">
            <el-radio :disabled="true" label="有">有</el-radio>
            <el-radio :disabled="true" label="无">无</el-radio>
          </el-radio-group>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="添加人: ">
              <el-input v-model="safety.addname"  :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="添加时间：">
              <div class="block">
                <el-date-picker v-model="safety.createtime" type="date" :disabled="true" placeholder="选择日期"></el-date-picker>
              </div>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" style="padding: 10px 20px 37px; margin-right: 60px;">
        <el-button @click="lookbutton = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看 ------------------------------------------------>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  data() {
    return {
      formInline:{// 多条件查询带到后台的值
        jigouming:'',
        currentPage: 1,//当前页
        pageSize: 10,//每页显示条数
      },
      safety:{//添加时往后台传值
        jigouId:'',    //机构id,
        rijianjujiaid:'',
        ismenwei:'',   //是否建立门卫制度 1:是,0:否
        isxfbiaoshi:'',       //有无消防安全标识 1:有,0:无
        isanquanyinhuan:'',     //机构周边是否存在自然灾害隐患 1:泥石流 ,3:洪水 ,5:森林火灾, 0:否
        ishuanjingwuran:'',   //机构周边是否存在环境污染隐患 1:是,0:否
        isliuyang:'',   //是否建立每日食品留样制度 1:是,0:否
        isguanlibumen:'',      //有无安排管理部门 1:是,0:否
        admname:'',     //管理部门负责人姓名
        admphone:'',    //管理部门负责人联系方式
        isxiaofang:'',   //有无消防管理人员 1:是,0:否
        firename:'',    //消防管理负责人姓名
        firetype:'',    //消防管理负责人工作性质 1:兼职,2:专职
        firedayprotection:'',     //是否每天开展日间防火巡查 1:是,0:否
        firenightprotection:'',   //是否每天开展夜间防火巡查 1:是,0:否
        fireevacuation:'',    //有无灭火和应急疏散预案 1:是,0:否
        emergency:'',     //有无突发事件应急预案(或突发事件应急管理制度) 1:有,0:无
        addname:'',     //添加人
      },
      total:0,//总页数
      tableData: [],//列表显示安全管理的id信息
      multipleSelection: [],
      xiangzhixinxi:[],//指标项，指标值信息
      isAdd:true,//控制文字提示
      dialogFormVisible:false,//控制弹窗显示与否
      lookbutton: false,//控制查看
      jigouname:[],//添加时选择的机构名称-查询日间照料中心表


      //表单验证
      rules: {
        rijianjujiaid: [
          { required: true, message: '请选择养老机构', trigger: 'change' },
        ],
        ismenwei: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isanquanyinhuan: [//下拉列表
          { required: true, message: '请选择', trigger: 'change' },
        ],
        ishuanjingwuran: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isliuyang: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isguanlibumen: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        admname: [//input输入框
          { required: true, message: '请输入管理部门负责人姓名', trigger: 'blur' },
        ],
        admphone: [//input输入框
          { required: true, message: '请输入管理部门负责人联系方式', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' },
        ],
        isxiaofang: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        firename: [//input输入框
          { required: true, message: '请输入消防管理负责人姓名', trigger: 'blur' },
        ],
        firetype: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        firedayprotection: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        firenightprotection: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        fireevacuation: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        emergency: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isxfbiaoshi: [//单选按钮
          { required: true, message: '请选择', trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    onSubmit(){
      axios.post("/chain-api/safetysystem/selectSafety",this.formInline).then(
        res=>{
          this.tableData=res.data.data.page.list;
          this.formInline.currentPage=res.data.data.page.pageNum;
          this.formInline.pageSize=res.data.data.page.pageSize;
          this.total=res.data.data.page.total;
          this.xiangzhixinxi = res.data.data.xiangzhixinxi;
        }
      )
    },
    chaxiangandzhi(){
      //查询服务信息内容
      axios.get("/chain-api/safetysystem/getRizhaoJujia").then(
        res=>{
          //查询日间照料居家管理服务表中的信息进行下拉列表显示
          this.jigouname=res.data.data.list;
        }
      )
    },
    openadd(){
      this.isAdd=true;
      this.dialogFormVisible=true;
      this.chaxiangandzhi();
      this.safety.jigouId='';
      this.safety.rijianjujiaid='';
      this.safety.ismenwei='';
      this.safety.isxfbiaoshi='';
      this.safety.isanquanyinhuan='';
      this.safety.ishuanjingwuran='';
      this.safety.isliuyang='';
      this.safety.isguanlibumen='';
      this.safety.admname='';
      this.safety.admphone='';
      this.safety.isxiaofang='';
      this.safety.firename='';
      this.safety.firetype='';
      this.safety.firedayprotection='';
      this.safety.firenightprotection='';
      this.safety.fireevacuation='';
      this.safety.emergency='';
      this.safety.addname='';
    },
    Add(){
      this.isAdd=false;
      this.dialogFormVisible=false;
      this.safety.addname=this.$store.state.loginuserinfo.userName;
      axios.post("/chain-api/safetysystem/addSafetySystem",this.safety).then(
        res=>{
          if(res.data.code==1){
            this.$message({
              showClose: true,
              message: "增加成功",
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message:"增加失败",
            });
          }
          this.onSubmit();
        }
      );
    },
    openedit(){//打开修改页面
      console.log(this.multipleSelection);
      if(this.multipleSelection.length!=1){
        this.$message.error("请选择一条数据");
        this.onSubmit();
      }else{
        this.isAdd=false;
        this.dialogFormVisible=true;
        let ids = this.multipleSelection[0].noid;
        this.chaxiangandzhi();
        axios.get("/chain-api/safetysystem/selectEditSafety/"+ids).then(
          res=>{
            this.safety=res.data.data.safety;
          }
        );
      }
    },
    edit(){//修改信息后进行保存操作
      this.dialogFormVisible=false;
      this.safety.addname=this.$store.state.loginuserinfo.userName;
      axios.put("/chain-api/safetysystem",this.safety).then(
        res=>{
          if(res.data.code==1){
            this.$message({
              showClose: true,
              message: "修改成功",
              type: 'success'
            })
          }else{
            this.$message.error({
              showClose: true,
              message:"修改失败",
            })
          }
          this.onSubmit();
        }
      )
    },
    dele(){
      if(this.multipleSelection.length==0){
        this.$message.error("请选择一条信息");
      }else{
        let ids = this.multipleSelection.map(value => value.noid);
        axios.post("/chain-api/safetysystem/deleteSafety",ids).then(
          res=>{
            if (res.data.code>0) {
              this.$message.success("批量删除成功");
            }else{
              this.$message.error("批量删除失败");
            }
            this.onSubmit();
          }
        );
      }
    },
    look(){
      if(this.multipleSelection.length!=1){
        this.$message.error("请选择一条数据");
        this.onSubmit();
      }else{
        this.lookbutton = true;
        let ids = this.multipleSelection[0].noid;
        this.chaxiangandzhi();
        axios.get("/chain-api/safetysystem/selectEditSafety/"+ids).then(
          res=>{
            console.log(res);
            this.safety=res.data.data.safety;
          }
        );
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // type序号 - 页面切换递增
    indexAdd(index) {
      // console.log(index, 222222)
      const pagea = this.formInline.currentPage; // 当前页码
      const pagesize = this.formInline.pageSize; // 每页条数
      return index + 1 + (pagea - 1) * pagesize;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.currentPage = val;
      this.onSubmit();
    },
  },
  mounted() {
    this.onSubmit();
  },
}
</script>

<style>

</style>